<template> 
  <div> 
    <QueryCondition />

    <!-- 设备列表 -->
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>单位</th>
          <th>设备名称</th>
          <th>设备设施</th>
          <th>切换频率</th>
          <th>状态</th>
          <th>是否需验收</th>
          <th>评分</th>
          <th>执行人</th>
          <th>执行时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in paginatedDevices" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.unit }}</td>
          <td>{{ item.deviceName }}</td>
          <td>{{ item.deviceFacility }}</td>
          <td>{{ item.switchFrequency }}</td>
          <td>{{ item.status }}</td>
          <td>{{ item.needAcceptance }}</td>
          <td>{{ item.rating }}</td>
          <td>{{ item.executor }}</td>
          <td>{{ item.executionTime }}</td>
          <td>
            <button class="button button-info" @click="showDetails(item)">详情</button>
            <button class="button button-delete" @click="deleteDevice(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 分页组件 -->
    <PagingDevice
      :currentPage.sync="currentPage"
      :itemsPerPage="itemsPerPage"
      :totalPages="(devices.length/itemsPerPage|0)+1"
      @pageChange="currentPage = $event"
      @itemsPerPageChange="itemsPerPage = $event"
    />
  </div>
</template>

<script>

import PagingDevice from "@/components/Maintenance/PagingDevice.vue"
import QueryCondition from "@/components/Maintenance/QueryCondition.vue"

export default {
  name: "MaintenanceIndex",
  components: {
    PagingDevice,
    QueryCondition
  },
  data() {
    return {
      devices: [], // 存储所有设备的数组
      currentPage: 1, // 当前页码
      itemsPerPage: 5, // 每页显示的设备数量
    };
  },
  computed: {
    paginatedDevices() {
      // 计算当前页应该显示的设备列表
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.devices.slice(startIndex, endIndex);
    },
  },
  methods: {
    getDevices() { 
      // 初始化设备数据
      for (let i = 0; i < 66; i++) {
        this.devices.push({
          unit: `unit ${i + 1}`,
          deviceName: `deviceName ${i + 1}`,
          deviceFacility:`deviceFacility ${i + 1}`,
          switchFrequency:`switchFrequency ${i + 1}`,
          status:`status ${i + 1}`,
          needAcceptance:`needAcceptance ${i + 1}`,
          rating:`rating ${i + 1}`,
          executor:`executor ${i + 1}`,
          executionTime:`executionTime ${i + 1}`,
        });
      }
    },
    showDetails(device) {
      // 显示设备详情
      console.log(device);
    },
    deleteDevice(index) {
      // 删除设备
      this.devices.splice(index, 1);
    },
    pageChanged(page) {
      // 处理页码变化
      this.currentPage = page;
    },
    itemsPerPageChanged(itemsPerPage) {
      this.itemsPerPage = itemsPerPage;
    },
  },
  created() {
    this.getDevices();// 在组件创建时初始化设备数据
  },
};
</script>

<style scoped>
@import url('@/assets/css/table.css');
</style>